<template>
  <div id="app">
    <div class="mine">
      <div class="bg"></div>
      <div class="user">
        <div class="photo">
          <img
            :src="userData.userFace"
            alt=""
            style="height: 100%; width: 100%; border-radius: 50%"
          />
          <div>
            {{ userData.username }}
          </div>
        </div>
        <div
          style="
            width: 125px;
            margin: 0 auto;
            margin-top: 75px;
            text-align: center;
            font-size: 12px;
            color: #7579ff;
          "
        >
          可可喜欢家，家喜欢干净
        </div>
        <div class="flex">
          <div class="item">
            <p>已完成</p>
            <div>{{ orderData1.total }}</div>
          </div>
          <div class="item">
            <p>待服务</p>
            <div>
              {{ orderData2.total }}
            </div>
          </div>
          <div class="item">
            <p>已支付</p>
            <div>{{ orderData1.total - orderData3.total }}</div>
          </div>
          <div class="item">
            <p>余额</p>
            <div>{{ userData.balance }}</div>
          </div>
        </div>
      </div>
      <div class="cell">
        <van-cell title="实名认证" is-link to="/certification"></van-cell>
        <van-cell title="提现" is-link @click="toWithdrawal"></van-cell>
        <van-cell title="收益信息" is-link to="/money"></van-cell>
        <van-cell title="个人信息" is-link to="/info"></van-cell>
        <div style="margin: 30px" route>
          <van-button round block type="info" replace to="/login"
            >退出登录</van-button
          >
        </div>
      </div>
      <van-dialog
        v-model="show"
        title="提现"
        show-cancel-button
        @confirm="toChange"
        :before-close="onBeforeClose"
      >
        <van-form @failed="formData" ref="form">
          <van-field
            v-model="formData.money"
            name="金额"
            label="金额"
            placeholder="请输入金额"
            :rules="[{ required: true, message: '请填写金额' }]"
          />
        </van-form>
      </van-dialog>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { getInfo } from "@/api/user";
import { submitAccountApply } from "@/api/changeapply";
import { pageQuery as orderpageQuery } from "@/api/order";
import { Toast } from "vant";
export default {
  data() {
    return {
      userData: [],
      token: "",
      show: false,
      formData: {
        userId: "",
        applyType: "提现",
        money: "",
      },
      orderData1: {},
      orderData2: {},
      orderData3: {},
      employeeId: "",
      status: "",
      params: {
        page: 1,
        pageSize: 20,
      },
    };
  },
  computed: {},
  methods: {
    async findUserData() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        overlay: true,
      });
      const res = await getInfo(this.token);
      this.userData = res.data;
      this.formData.userId = res.data.id;
      this.employeeId = res.data.id;
      Toast.clear();
    },
    async findorderData1() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        overlay: true,
      });
      await this.findUserData();
      const temp = {
        ...this.params,
        employeeId: this.employeeId,
        status: "已完成",
      };
      let res = await orderpageQuery(temp);
      this.orderData1 = res.data;
      Toast.clear();
    },
    async findorderData2() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        overlay: true,
      });
      await this.findUserData();
      const temp = {
        ...this.params,
        employeeId: this.employeeId,
        status: "待服务",
      };
      let res = await orderpageQuery(temp);
      this.orderData2 = res.data;
      Toast.clear();
    },
    async findorderData3() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
        overlay: true,
      });
      await this.findUserData();
      const temp = {
        ...this.params,
        employeeId: this.employeeId,
        status: "待支付",
      };
      let res = await orderpageQuery(temp);
      this.orderData3 = res.data;
      Toast.clear();
    },
    toWithdrawal() {
      this.formData.money = "";
      this.show = true;
    },
    toChange() {
      this.$refs.form
        .validate()
        .then(async () => {
          const res = await submitAccountApply(this.formData);
          console.log(res.data);
          this.$toast.success("提现成功");
          this.show = false;
        })
        .catch(() => {
          this.$toast.fail("提现失败");
        });
    },
    onBeforeClose(action, done) {
      if (action === "confirm") {
        return done(false);
      } else {
        // 重置表单校验
        this.$refs["form"].resetValidation("金额");
        this.name = undefined;
        return done();
      }
    },
  },
  created() {
    this.token = getToken();
    this.findUserData();
    this.findorderData1();
    this.findorderData2();
    this.findorderData3();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.mine > .bg {
  height: 180px;
  background-image: linear-gradient(90deg, #ccff99, #66cccc);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.user {
  width: 80%;
  height: 170px;
  background-color: #cccccc;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  box-shadow: 0 0 10px #99ccff;
  border-radius: 8px;
  padding: 0 1em;
}
.photo {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background-color: #99ccff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.cell {
  margin-top: 116px;
  padding: 0.5em 2em;
}
.flex {
  display: flex;
  justify-content: space-around;
  margin-top: 18px;
}
.item {
  width: 24%;
  height: 45px;
  text-align: center;
  cursor: pointer;
  background-color: black;
  font-size: 11px;
  color: white;
  line-height: 10px;
}
.item > div {
  font-size: 18px;
  color: #7579ff;
}
</style>